﻿<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入 Element Plus -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/element-plus"></script>
<style>
    #app {
        margin-top: 20px;
    }

    /* 基础信息容器 */
    .basic-info {
        background-color: #fff;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
    }

    /* 标签页容器 */
    .tabs-container {
        background-color: #fff;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        min-height: 400px;
        padding: 20px;
    }

    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    /* 附件项 hover 效果 */
    .file-item {
        transition: background-color 0.2s;
    }

        .file-item.bg-light {
            background-color: #e6f7ed;
        }

    /* 表格、表单通用样式 */
    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .form-col {
        flex: 0 0 50%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .full-width {
        flex: 0 0 100%;
    }
</style>
<div id="app">
    <!-- 顶部基础信息区域 -->
    <div class="basic-info">
        <!-- 标题与操作按钮 -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3></h3>
            <div>
                <el-button>编辑</el-button>
                <el-button>删除</el-button>
                <el-button>停用</el-button>
                <el-button v-on:click="printDialogVisible = true">打印</el-button>
                <el-dropdown>
                    <el-button>更多</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>操作选项1</el-dropdown-item>
                            <el-dropdown-item>操作选项2</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <!-- 图片轮播 + 信息区域 -->
        <div style="display: flex; gap: 20px;">
            <!-- 图片轮播 -->
            <el-carousel height="200px" style="width: 300px;">
                <el-carousel-item v-for="(img, index) in imgs" :key="index">
                    <img :src="img" style="width: 100%; height: 100%; object-fit: cover;" />
                </el-carousel-item>
            </el-carousel>

            <!-- 右侧信息 -->
            <div style="flex: 1;">
                <!-- 价格提示栏 -->
                <div style="background-color: #e6f7ed; padding: 10px; margin-bottom: 15px;">
                    <span>入库参考价: <span style="color: red;"></span></span>
                    <span style="margin-left: 20px;">出库参考价: <span style="color: red;"></span></span>
                </div>

                <!-- 基础信息表单（只读） -->
                <el-form label-width="120px">
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="货品类型">
                                <el-input v-model="form.goodsType" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="规格型号">
                                <el-input v-model="form.specModel" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="供应商">
                                <el-input v-model="form.supplier" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="客户名称">
                                <el-input v-model="form.customer" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="保质期管理">
                                <el-switch v-model="form.shelfLifeManage" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="保质期">
                                <el-input v-model="form.shelfLife" disabled style="width: 100px; margin-right: 5px;" />
                                <el-input v-model="form.shelfLifeUnit" disabled style="width: 50px;" />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="预警天数">
                                <el-input v-model="form.warnDays" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <el-form-item label="状态">
                                <el-input v-model="form.statusText" disabled />
                            </el-form-item>
                        </div>
                        <div class="form-col">
                            <el-form-item label="排序">
                                <el-input v-model="form.displayOrder" disabled />
                            </el-form-item>
                        </div>
                    </div>
                    <div class="form-row full-width">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" disabled type="textarea" />
                        </el-form-item>
                    </div>
                </el-form>

                <!-- 创建/更新信息 -->
                <div style="color: #909399; font-size: 14px;">
                    <span>创建人:  &nbsp;&nbsp; 创建时间: </span>
                    <span style="margin-left: 20px;">更新人: 更新时间:</span>
                </div>
            </div>
        </div>

        <!-- 总库存/总金额 -->
        <div style="display: flex; justify-content: center; margin-top: 20px;">
            <div style="text-align: center; margin: 0 40px;">
                <div style="font-size: 20px; font-weight: bold;"></div>
                <div>总库存</div>
            </div>
            <div style="text-align: center; margin: 0 40px;">
                <div style="font-size: 20px; font-weight: bold;"></div>
                <div>库存总金额</div>
            </div>
        </div>
    </div>

    <!-- 标签页区域 -->
    <div class="tabs-container">
        <el-tabs v-model="activeTab">
            <!-- 其他信息 -->
            <el-tab-pane label="其他信息" name="other">
                <div style="margin-top: 20px;">
                    <h4>附件</h4>
                    <!-- 已上传附件列表 -->
                    <div v-for="(file, index) in uploadedFiles"
                         :key="index"
                         class="file-item"
                         :class="{ 'bg-light': hoverIndex === index }"
                         v-on:mouseenter="hoverIndex = index"
                         v-on:mouseleave="hoverIndex = -1"
                         style="display: flex; align-items: center; margin: 10px 0; padding: 8px; border-radius: 4px; cursor: pointer;">
                        <span style="flex: 1;">{{ file.name }}</span>
                        <el-button size="small" type="text" style="color: #ff4d4f;" v-on:click="removeFile(index)">删除</el-button>
                    </div>
                    <!-- 上传按钮 -->
                    <el-upload class="upload-demo"
                               action="https://jsonplaceholder.typicode.com/posts/"
                               v-on:success="handleUploadSuccess"
                               v-on:error="handleUploadError"
                               :file-list="fileList"
                               :auto-upload="true"
                               :show-file-list="false"
                               accept=".doc,.docx,.pdf,.rar,.zip"
                               :limit="10"
                               v-on:exceed="handleExceed">
                        <el-button type="primary">上传附件</el-button>
                    </el-upload>
                    <p style="margin: 10px 0; color: #909399;">支持格式：doc、docx、pdf、rar、zip，单文件最大200MB</p>
                </div>
            </el-tab-pane>

            <!-- 其他标签页 -->
            <el-tab-pane label="入库记录" name="in">入库记录内容</el-tab-pane>
            <el-tab-pane label="出库记录" name="out">出库记录内容</el-tab-pane>
            <el-tab-pane label="盘点记录" name="check">盘点记录内容</el-tab-pane>
            <el-tab-pane label="调拨记录" name="transfer">调拨记录内容</el-tab-pane>
            <el-tab-pane label="进货记录" name="purchase">进货记录内容</el-tab-pane>
            <el-tab-pane label="销售记录" name="sale">销售记录内容</el-tab-pane>
            <el-tab-pane label="库存分布" name="distribution">库存分布内容</el-tab-pane>
            <el-tab-pane label="出入库统计" name="stat">出入库统计内容</el-tab-pane>
            <el-tab-pane label="操作记录" name="log">操作记录内容</el-tab-pane>
        </el-tabs>
    </div>

    <!-- 打印弹窗 -->
    <el-dialog title="打印" v-model="printDialogVisible" width="400px">
        <div style="text-align: center;">
            <img src="https://picsum.photos/120/120?random=10" alt="二维码" style="width: 120px; height: 120px; margin-bottom: 10px;" />
            <div style="margin-bottom: 10px;">HPBH021355</div>
            <el-table :data="printData" style="width: 100%;">
                <el-table-column prop="label" label="项目"></el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button v-on:click="printDialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="handlePrint">打印</el-button>
            </span>
        </template>
    </el-dialog>
</div>
<script>
    const { createApp, reactive, ref } = Vue;
    const {
        ElMessage, ElCarousel, ElCarouselItem, ElTabs, ElTabPane,
        ElDropdown, ElDropdownMenu, ElDropdownItem, ElDialog,
        ElTable, ElTableColumn, ElUpload, ElButton, ElInput, ElSwitch, ElForm, ElFormItem
    } = ElementPlus;

    const app = createApp({
        setup() {
            // ---------- 基础信息 ----------
            const form = reactive({
            });

            // 轮播图片（从.NET模型获取）
            const imgs = ref();

            // ---------- 标签页激活状态 ----------
            const activeTab = ref('other');

            // ---------- 附件上传逻辑 ----------
            const fileList = ref([]);
            const uploadedFiles = ref([
                { name: '文件标签.txt' },
                { name: '文件标签.doc' },
                { name: '文件标签.pdf' },
                { name: '文件标签.txt' },
                { name: '文件标签.doc' },
                { name: '文件标签.pdf' }
            ]);
            const hoverIndex = ref(-1);

            const handleUploadSuccess = (response, file) => {
                uploadedFiles.value.push({
                    name: file.name,
                    url: URL.createObjectURL(file.raw)
                });
                ElMessage.success(`文件 "${file.name}" 上传成功`);
            };

            const handleUploadError = (err, file) => {
                ElMessage.error(`文件 "${file.name}" 上传失败，请重试`);
            };

            const handleExceed = (files) => {
                ElMessage.warning(`最多只能上传10个文件`);
            };

            const removeFile = (index) => {
                uploadedFiles.value.splice(index, 1);
                ElMessage.info(`文件已删除`);
            };

            // ---------- 打印弹窗逻辑 ----------
            const printDialogVisible = ref(false);
            const printData = ref([
                { label: '货品名称', value: '智能智障' },
                { label: '货品类型', value: '电子产品' },
                { label: '规格型号', value: '50*20*30' },
                { label: '所在仓库', value: '仓库一/库位三' }
            ]);

            const handlePrint = () => {
                ElMessage.info('执行打印操作（可结合实际打印逻辑扩展）');
                printDialogVisible.value = false;
            };

            return {
                form,
                imgs,
                activeTab,
                fileList,
                uploadedFiles,
                hoverIndex,
                handleUploadSuccess,
                handleUploadError,
                handleExceed,
                removeFile,
                printDialogVisible,
                printData,
                handlePrint
            };
        }
    });

    // 注册Element Plus组件
    app.component('ElCarousel', ElCarousel);
    app.component('ElCarouselItem', ElCarouselItem);
    app.component('ElTabs', ElTabs);
    app.component('ElTabPane', ElTabPane);
    app.component('ElDropdown', ElDropdown);
    app.component('ElDropdownMenu', ElDropdownMenu);
    app.component('ElDropdownItem', ElDropdownItem);
    app.component('ElDialog', ElDialog);
    app.component('ElTable', ElTable);
    app.component('ElTableColumn', ElTableColumn);
    app.component('ElUpload', ElUpload);
    app.component('ElButton', ElButton);
    app.component('ElInput', ElInput);
    app.component('ElSwitch', ElSwitch);
    app.component('ElForm', ElForm);
    app.component('ElFormItem', ElFormItem);

    app.use(ElementPlus);
    app.mount('#app');
</script>